<template>
  <div class="dashboard" style="width: 1200px;height:600px;">
    <div class="msg-top-text">首页</div>
    <div class="msg-text">流量统计</div>
    <div>
      <div id="traffic" style="width: 1200px; height:500px;margin-left:20px;" />
    </div>
  </div>
</template>

<script>
import { DataVolume } from '../../api/status'
export default {
  name: 'Dashboard',
  data() {
    return {
      id: undefined,
      start: '',
      end: '',
      datavolume: ''
    }
  },
  watch: {
    start(newVal) {
      console.log(newVal)
    }
  },
  mounted() {
    this.Traffic()
  },
  methods: {
    Traffic() {
      var myChart = this.$echarts.init(document.getElementById('traffic'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} '
          },
          axisPointer: {
            snap: true
          }
        },
        visualMap: {
          show: false,
          dimension: 0,
          pieces: [
            {
              lte: 6,
              color: 'green'
            },
            {
              gt: 6,
              lte: 8,
              color: 'green'
            },
            {
              gt: 8,
              lte: 14,
              color: 'green'
            },
            {
              gt: 14,
              lte: 17,
              color: 'green'
            },
            {
              gt: 17,
              color: 'green'
            }
          ]
        },
        series: [
          {
            name: 'Traffic',
            type: 'line',
            smooth: true,
            data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
          }
        ]
      }
      myChart.setOption(option)
    },
    submit() {
      console.log('submit-------')
      DataVolume({
        id: this.id,
        start: this.start,
        end: this.end
      }).then((res) => {
        console.log('res-----', res)
        this.datavolume = res.data.dataVolume
      })
    }
  }
}
</script>

<style>
.dashboard{
  margin:10px 15px 15px 20px;
  width: 88em;
  height: 52em;
  background:white;
  border-radius:1.5em;
}
.msg-top-text{
  font-size: 1.2em;
  color: #4D4F5C;
  border-bottom:0.08em solid dimgray;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}
.msg-text{
  font-size: 1.2em;
  color: #4D4F5C;
  font-weight: 700;
  height: 2.5em;
  margin: 0 0.93em 0 0.93em;
  padding: 0.8em 0 0.5em 0;
}
</style>
